<template>
  <div class="flex-1 page_contain">
    <div class="app-container">
      <!-- 搜索框 -->
      <div class="search-container">
        <el-form :model="searchParam" :inline="true" label-width="40px">
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.year"
              placeholder="请选择"
              filterable
              :suffixIcon="() => '年'"
            >
              <el-option
                v-for="item in yearOptions"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="w-[100px]">
            <el-select
              v-model="searchParam.month"
              placeholder="请选择"
              filterable
              clearable
              :suffixIcon="() => '月'"
            >
              <el-option
                v-for="item in useDictionary('MonthList')"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <i-ep-search />
              搜索
            </el-button>
            <el-button @click="handleReset">
              <i-ep-refresh />
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表 -->
      <div style="height: calc(100vh - 120px - 80px); overflow-y: auto">
        <div class="flex h-[280px] mb-[10px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title">计划检修-年度统计</div>
            <deviceManage-line
              :id="`yearTotal1`"
              key="3"
              xUnit="月"
              :params="[reportData?.annualStatistics ?? {}]"
            />
          </div>
        </div>
        <div class="flex h-[300px] mb-[10px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title">计划检修-工段统计</div>
            <deviceManage-bar
              :id="`allClose`"
              key="3"
              title=""
              :params="reportData?.aectionStatistics ?? {}"
            />
          </div>
          <div class="flex-1 h-full card_class ml-[10px]!">
            <div class="card_title">
              {{ `计划检修-班组统计` }}
            </div>
            <deviceManage-pie
              :id="`allMonthCount`"
              key="3"
              :params="reportData?.teamStatistics?.data ?? []"
            />
          </div>
        </div>

        <!-- <div class="flex h-[330px] mb-[10px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title flex justify-between items-center">
              <span>故障维修-故障位置统计</span>
              <el-select
                v-model="processId"
                placeholder="请选择工序"
                clearable
                size="small"
                style="width: 130px"
              >
                <el-option
                  v-for="(item, index) in mockProcessList"
                  :key="index"
                  :label="item"
                  :value="index"
                  @click="handleProcess"
                />
              </el-select>
            </div>
            <deviceManage-bar-one
              :id="`yearTotal3`"
              key="6"
              :title="mockProcessList[processId]"
              :params="reportData?.yearOrderTrend1 ?? []"
            />
          </div>
        </div> -->

        <!-- <div class="flex h-[300px]">
          <div class="flex-1 h-full card_class">
            <div class="card_title">非停机故障</div>
            <deviceManage-bar
              :id="`allClose1`"
              key="4"
              title=""
              :params="reportData?.yearOrderCloseRate ?? {}"
            />
          </div>
          <div class="flex-1 h-full card_class ml-[10px]!">
            <div class="card_title">
              {{ `停机故障` }}
            </div>
            <deviceManage-bar
              :id="`allClose2`"
              key="5"
              title=""
              color="rgb(243,148,35)"
              :params="reportData?.yearOrderCloseRate1 ?? {}"
            />
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import dayjs from "dayjs";
import { mockData, mockProcessList } from "./index";

defineOptions({
  name: "EAMEQUDEVICEMANAGEREPORTPLAN",
  inheritAttrs: false,
});

// 获取年度列表
const yearOptions = ref();
async function getYears() {
  const { data } = await request({
    url: "/system/dateInfo/getYearList",
    method: "post",
    data: {},
  });
  yearOptions.value = data;
}

function handleReset() {
  searchParam.year = dayjs().year().toString();
  (searchParam.month = (dayjs().month() + 1).toString()), handleSearch();
}

const processId = ref(3);
const reportData = ref();
const loading = ref(true);

async function handleSearch() {
  reportData.value = null;
  setTimeout(async () => {
    reportData.value = null;
    loading.value = true;
    Object.assign(searchedParam, searchParam);
    const { data } = await request({
      url: `/eam/equStatistics/queryPlanRepairOrdeList`,
      method: "post",
      data: {
        // workshopSectionCode: tabList.value[Number(activeTabs.value)].label,
        statisticsYear: searchParam.year,
        statisticsMoon: searchParam.month,
      },
    }).finally(() => {
      loading.value = false;
    });
    reportData.value = data;
  }, 20);
}

function handleProcess() {
  reportData.value = {
    ...reportData.value,
    yearOrderTrend1: null,
  };
  setTimeout(async () => {
    reportData.value.yearOrderTrend1 = mockData.yearOrderTrend1;
  }, 20);
}

// tab点击事件
function tabClickHandle(e: any) {
  reportData.value = null;
  handleSearch();
}

// 请求参数
// const requestApi = "/dmpDosPcm/psmprocessdata/queryByPage";

const searchParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

const searchedParam = reactive({
  year: dayjs().year().toString(),
  month: (dayjs().month() + 1).toString(),
});

onMounted(() => {
  getYears();
  handleSearch();
});
</script>

<style lang="scss" scoped>
:deep(.app-container .el-tabs--border-card) {
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  border: none;
  .el-tabs__content {
    height: calc(100vh - 120px - 80px - 34px);
    overflow-y: auto;
  }
  .el-loading-spinner {
    margin-top: 200px;
  }
}
:deep(.search-container) {
  .el-form-item {
    margin-right: 14px;
  }
  .el-select .el-input .el-select__caret.el-icon {
    font-style: normal;
    transform: none !important;
  }
}

.card_class {
  background-color: var(--el-bg-color-overlay);
  border-radius: 4px;
  box-shadow: 0px 0px 12px rgba(3, 8, 72, 0.08);
  .card_title {
    white-space: nowrap;
    font-size: 20px;
    color: #333;
    font-family: YOUSHE;
    padding: 10px 20px;
  }
}
</style>
